<template>
    <div class="articleMoreContainer">
        <header>{{name}}</header>
        <div class="search-area">
                    <Search
                        :active="active"
                        @search="handleSearch"
                    >
                    </Search>
                </div>
        <el-table :data="tableData" :show-header="false" style="width: 100%">
                <el-table-column  prop="name">
                    <template slot-scope="scope" class="name" >
                        <a href="#" title="" @click="openMenuFunction(scope.row)"><span style="margin-right:10px">{{scope.row.typeId==='30021'?scope.row.deptFeedState==='0'?'未反馈':'已反馈':''}}</span>{{scope.row.name}}</a>
                    </template>
                </el-table-column>
            <el-table-column prop="publishTime" label="日期" width="180"></el-table-column>
        </el-table>
        <CustomPagination
            :totalPages="pageController.totalPages"
            :totalNum="pageController.totalNum"
            :currentPage="pageController.currentPage"
            :perPageSuggestion="pageSizeSuggestion"
            @perPageChange="handlePerPageChange"
            @toFirstPage="toFirstPage"
            @toLastPage="toLastPage"
            @toNextPage="toNextPage"
            @toEndPage="toEndPage"
            @toTargetPage="toTargetPage"
        ></CustomPagination>
    </div>
</template>

<script>
import appUtil from '~/assets/utils/appUtil';
import CustomPagination from '../componentStore/common/CustomPagination';
import Search from '../componentStore/common/Search';
export default {
    name: 'ArticleMore',
    data () {
        return {
            tableData: [],
            pageController:{
                totalPages:'',
                totalNum:'',
                currentPage:1,
                ps:10
            },
            pageSizeSuggestion: [12, 15, 20, 25, 30],
            active:'allArticle',
            articleDetail:'./articleDetail.html'
        };
    },
    components:{
        CustomPagination,
        Search
    },
    created(){
        let url = window.location.href;
        this.categoryId = appUtil.getParamFromUrl(url,'categoryId');
        this.typeId = appUtil.getParamFromUrl(url,'typeId');
        this.name = appUtil.getParamFromUrl(url,'name');
        this.articleDetailFn(this.pageController);
    },
    methods: {
        // 初始化数据
        articleDetailFn(pageController){
            let search = pageController.searchParams?pageController.searchParams.search:'';
            let data = {
                typeId:this.typeId,
                categoryId:this.categoryId ? this.categoryId : '',
                userId:appUtil.getSes('userId'),
                deptCodes:appUtil.getLocal('orgCode'),
                roleIds:appUtil.getSes('roleIds'),
                status:'1',
                ps:10,
                pn:1,
                frontId:'1' //需要通过失效时间过滤
            };
            if(search){
                data.search = search;
            }
            this.$axios.get('/ptp-cms/cmscontent/getContentByUserIdDeptCode',{params:data})
                .then(res => {
                    this.tableData = res.data.data.dataList;
                    this.pageController.totalPages = res.data.data.totalPage;
                    this.pageController.totalNum = res.data.data.totalNumber;
                    this.pageController.currentPage = res.data.data.pageNumber;
                });
        },
        // 打开详情页面
        openMenuFunction(item){
            console.log(8);
            let url = this.articleDetail+'?typeId=' + item.typeId + '&articleId='+ item.id;
            // window.open(url, '_blank');
            let menu = {
                url:url,
                name:this.name,
                isNew:false // 是否在新页面打开
            };
            if(item.typeId === '30021'){
                let routeData = this.$router.resolve({
                    path: '/FeedbackDetail',
                });
                menu.url = window.location.href.split('#')[0]+routeData.href+'?typeId=' + item.typeId + '&articleId='+ item.id;
            }      
            window.parent.addTabToParent(this.name,menu.url);
        },
        // 搜索
        handleSearch(searchType, searchKey){
            let tempData = Object.assign({}, this.pageController, {
                searchParams: {search: searchKey }
            });
            this.articleDetailFn(tempData);
        },
        toFirstPage () {
            this.toTargetPage(1);
        },
        toLastPage () {
            let target = this.pageController;
            if (target.currentPage > 1) {
                this.toTargetPage(target.currentPage - 1);
            }
        },
        toNextPage () {
            let target = this.pageController;
            if (target.currentPage < target.totalPages) {
                this.toTargetPage(target.currentPage + 1);
            }
        },
        toEndPage () {
            this.toTargetPage(this.pageController.totalPages);
        },
        toTargetPage (pageNum) {
            let target = this.pageController;

            if (target.currentPage !== pageNum) {
                target.currentPage = pageNum;
                target.start = target.perPage * (pageNum - 1);
            }
            this.articleDetailFn(this.pageController);
        },
        handlePerPageChange (perPage) {
            this.pageController.perPage = perPage;
            //重新算出当前页第一条数据的序号，以便重新加载表格
            this.resetPageController(this.currentPageTableData.length, perPage, this.pageController.currentPage);
        },
    },
};
</script>

<style lang="scss" scoped>
    .articleMoreContainer{
        header{
            height: 40px;
            line-height: 40px;
            color: #0066FF;
            border-bottom: 1px solid #eee;
            padding-left: 16px;
            font-size: 16px;
        }
         .el-table .cell{
            padding-left: 16px;
        }
        .search-area{
            width: 400px;
            position: absolute;
            top: 4px;
            right: 30px;
            z-index: 1;
        }
    }
</style>
